<template>
    <el-dialog width="35%" v-model="dialogVisible" title="添加医护工作者" :before-close="handleClose" draggable overflow center
        align-center>
        <el-form :model="formData" ref="ruleFormRef" :rules="rules" status-icon>
            <el-form-item label="用户名" prop="username" label-width="30%">
                <el-input v-model="formData.username" class="input" placeholder="输入用户名" style="width: 70%" />
            </el-form-item>
            <el-form-item label="密码" prop="password" label-width="30%">
                <el-input type="password" v-model="formData.password" placeholder="6-18位字母、数字或“_”，字母开头" class="input"
                    show-password style="width: 70%" />
            </el-form-item>
            <el-form-item label="姓名" prop="name" label-width="30%">
                <el-input v-model="formData.name" class="input" placeholder="请输入姓名" style="width: 70%" />
            </el-form-item>
            <el-form-item label="性别" prop="sex" label-width="30%">
                <el-input v-model="formData.sex" class="input" placeholder="请输入性别" style="width: 70%" />
            </el-form-item>
            <el-form-item label="手机号码" prop="telephone" label-width="30%">
                <el-input v-model="formData.telephone" class="input" placeholder="请输入11位手机号" style="width: 70%" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="onSubmit(ruleFormRef)">注册</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { storeToRefs } from "pinia";
import { useUserStore } from "../../../stores/user.js";
const userStore = useUserStore()
const { formData, dialogVisible } = storeToRefs(userStore)

const ruleFormRef = ref()
const onSubmit = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            userStore.formData.roleId = 3
            console.log(userStore.formData);
            userStore.addAllUser()
            userStore.getAllDoctors()
        }
    })
}

const resetForm = (formEl) => {
    formEl.resetFields()
    if (!formEl) return
    formEl.resetFields()
}

const rules = reactive({
    username: [
        {
            required: true, //必填规格
            message: '请输入用户名', //违反规则提示的信息
            trigger: 'blur' //失去焦点时触发
        },
        {
            min: 5,
            max: 10,
            message: '5-10个数字或字母组合',
            trigger: 'blur'
        }
    ],
    name: [
        {
            required: true, //必填规格
            message: '请输入真实姓名', //违反规则提示的信息
            trigger: 'blur' //失去焦点时触发
        }
    ],
    sex: [
        {
            required: true, //必填规格
        }
    ],
    telephone: [
        {
            required: true, //必填规格
            message: '请输入手机号', //违反规则提示的信息
            trigger: 'blur' //失去焦点时触发
        },
        {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'change'
        }
    ],
    password: [
        {
            required: true, //必填规格
            message: '请输入密码', //违反规则提示的信息
            trigger: 'blur' //失去焦点时触发
        },
        {
            pattern: /^[a-zA-Z]\w{5,18}$/,
            message: '只能包含字母、数字、下划线,以字母开头',
            trigger: 'change'
        },
        {
            min: 6,
            max: 18,
            message: '6-18个字符',
            trigger: 'blur'
        }
    ],
})
</script>